<template>
  <div class="postReplyCard">
    <div class="left">
      <div class="userInfo">
        <el-image class="avatar" :src="baseUrl + postReply.userInfo.avatarUrl" @click="goUserInterface(postReply.userInfo)" />
        <p>{{ postReply.userInfo.nickName }}</p>
        <el-tag v-if="postReply.post.userId === postReply.userInfo.id" size="mini" type="danger">发帖人</el-tag>
        <template v-if="parseInt(userId) !== postReply.userInfo.id">
          <el-button
            v-if="isFocus === 0 || isFocus === undefined"
            type="primary"
            plain
            size="mini"
            style="margin: 10px auto;"
            icon="el-icon-plus"
            @click="handleFocus"
          >关注</el-button>
          <el-button
            v-else
            type="info"
            plain
            size="mini"
            style="margin: 10px auto;"
            icon="el-icon-check"
            @click="handleFocus"
          >已关注</el-button>
        </template>
      </div>
    </div>
    <div class="right">
      <div class="content">
        <span v-html="format(postReply.content)" />
      </div>
      <div class="other-info">
        <el-tag size="mini">{{ order }}楼</el-tag>
        <el-tag size="mini">{{ postReply.publishDate }}</el-tag>
        <template v-if="postReply.isFirst === 0">
          <el-tag v-if="!isVisibleCommentList" size="mini" class="comment" @click="getCommentVoList">评论({{ postReply.commentCount }})</el-tag>
          <el-tag v-else size="mini" class="comment comment-active" type="info" @click="isVisibleCommentList=false">收起评论</el-tag>
        </template>
      </div>
      <div v-if="isVisibleCommentList" class="commentList">
        <div v-for="item in commentList" :key="item.id" class="comment-item">
          <el-image :src="baseUrl + item.userInfo.avatarUrl" />
          <div class="comment-right">
            <span v-if="item.beCommentedUserInfo" class="comment-content"><b>{{ item.userInfo.nickName }} 回复
              <span class="hyperlink" @click="goUserInterface(item.beCommentedUserInfo)">{{ `@${item.beCommentedUserInfo.nickName}` }}</span>
              : </b>{{ item.content }}</span>
            <span v-else class="comment-content"><b>{{ item.userInfo.nickName }}: </b>{{ item.content }}</span>
            <div class="comment-data-btn">
              <span>{{ item.publishDate }}</span>
              <el-button plain size="mini" @click="handleShowCommentDialog(item.userInfo)">回复</el-button>
            </div>
          </div>
        </div>
        <el-pagination
          v-if="commentList.length !== 0"
          :total="total"
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[10,15,20,25,30]"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleChange"
          @size-change="handleSizeChange"
        />
        <h4 v-else style="text-align: center;">暂无相关评论</h4>
        <el-button size="mini" @click="handleShowCommentDialog(undefined)">我也说一句</el-button>
      </div>
    </div>
    <el-dialog class="pubilsh-comment" title="发表评论" :visible.sync="dialogVisible">
      <el-form
        ref="commentform"
        :model="commentForm"
        :rules="commentFormRules"
        hide-required-asterisk
      >
        <el-form-item label="评论内容" prop="content">
          <el-input v-model="commentForm.content" type="textarea" :placeholder="commentDialogPlaceholder" />
        </el-form-item>
        <el-button :loading="isButtonLoading" @click="handlePublishComment">发表</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { saveComment, getCommentVoList } from '@/api/comment'
import { saveUserFocusInfo, updateUserFocusInfo } from '@/api/userFocusInfo'
import { mapGetters } from 'vuex'
import { formatDateTime } from '@/utils/dateUtil'
export default {
  name: 'PostReplyCard',
  props: {
    postReply: {
      type: Object,
      default: undefined
    },
    order: {
      type: Number,
      default: undefined
    },
    isFocus: {
      type: Number,
      default: undefined
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      isVisibleCommentList: false,
      commentList: [],
      dialogVisible: false,
      pageNum: 1,
      pageSize: 10,
      total: undefined,
      commentForm: {
        userId: undefined,
        beCommentedUserId: undefined,
        postReplyId: this.postReply.id,
        content: undefined,
        publishDate: undefined
      },
      commentFormRules: {
        content: [{
          required: true,
          message: '请输入评论内容',
          trigger: 'blur'
        }]
      },
      isButtonLoading: false,
      commentDialogPlaceholder: '请输入评论内容'
    }
  },
  methods: {
    format(content) {
      var regexp = /<img src="/gi
      return content.replace(regexp, `<img src="${this.baseUrl}`)
    },
    goUserInterface(userInfo) {
      this.$router.push({
        path: '/userInterface',
        query: {
          userId: userInfo.userId
        }
      })
    },
    handleShowCommentDialog(userInfo) {
      if (userInfo) {
        this.commentForm.beCommentedUserId = userInfo.userId
        this.commentDialogPlaceholder = `回复 ${userInfo.nickName}`
      } else {
        this.commentDialogPlaceholder = '请输入评论内容'
        this.commentForm.beCommentedUserId = undefined
      }
      this.dialogVisible = true
    },
    async handleFocus() {
      try {
        if (this.isFocus !== undefined) {
          await updateUserFocusInfo({
            beFocusedUserId: this.postReply.userInfo.id,
            isFocus: this.isFocus === 0 ? 1 : 0,
            focusDate: formatDateTime(new Date())
          })
        } else {
          await saveUserFocusInfo({
            beFocusedUserId: this.postReply.userInfo.id,
            isFocus: 1,
            focusDate: formatDateTime(new Date())
          })
        }
      } catch (error) {
        console.log(error)
      }
      this.$emit('updateUserFocusInfoList')
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getCommentVoList()
    },
    handleChange(value) {
      this.pageNum = value
      this.getCommentVoList()
    },
    handlePublishComment() {
      this.$refs.commentform.validate(valid => {
        if (valid) {
          this.commentForm.userId = this.userId
          this.commentForm.publishDate = formatDateTime(new Date())
          this.isButtonLoading = true
          saveComment(this.commentForm).then(res => {
            console.log(res)
          }, err => {
            console.log(err)
          }).finally(() => {
            this.isButtonLoading = false
            this.dialogVisible = false
            this.commentForm = {
              userId: undefined,
              beCommentedUserId: undefined,
              postReplyId: this.postReply.id,
              content: undefined,
              publishDate: undefined
            }
            this.getCommentVoList()
            this.$emit('updatePostReplyVoList')
          })
        } else {
          console.log('表单验证有误')
        }
      })
    },
    async getCommentVoList() {
      const searchParam = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        searches: [
          {
            key: 'post_reply_id',
            rule: '=',
            value: this.postReply.id
          }
        ]
      }
      const { data } = await getCommentVoList(searchParam)
      this.commentList = data.list
      this.total = data.total
      this.isVisibleCommentList = true
    }
  }
}
</script>

<style lang="scss">
.postReplyCard {
  .content {
    flex-grow: 1;
    margin-bottom: 60px;
    img {
      width: 100% !important;
    }
  }
}
</style>

<style lang="scss" scoped>
.postReplyCard {
  display: flex;
  width: 100%;
  border-bottom: 1px solid rgb(181, 181, 181);
  .left {
    flex-shrink: 0;
    padding-bottom: 10px;
    width: 150px;
    background: #ffffff;
    border-right: 1px solid rgb(198, 198, 198);
    .userInfo {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .avatar {
        border: 1px solid rgb(174, 174, 174);
        background-color: aliceblue;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        &:hover {
          box-shadow: 0 0 5px black;
          cursor: pointer
        }
      }
      p {
        margin: 5px 0;
      }
    }
  }
  .right {
    flex-grow: 1;
    padding: 10px;
    background: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    .content {
      flex-grow: 1;
      margin-bottom: 60px;
    }
    .other-info {
      text-align: right;
        .el-tag {
        margin-right: 10px;
        }
        .comment:hover{
          cursor: pointer;
          font-weight: bold;
        }
        .comment-active {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          border-bottom: 0;
        }
    }
    .commentList {
      background: #f4f4f5;
      .comment-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid rgb(222, 222, 222);
        .el-image {
          flex-shrink: 0;
          border: 1px solid rgb(174, 174, 174);
          background-color: aliceblue;
          width: 40px;
          height: 40px;
          margin-right: 10px;
          border-radius: 50%;
        }
        .comment-right {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          .hyperlink {
            color: #1192ee;
            cursor: pointer;
          }
          .comment-content {
            font-size: 14px;
          }
          .comment-data-btn {
            display: flex;
            align-items: center;
            justify-content: right;
            font-size: 10px;
            color: gray;
          }
        }
      }
      .el-pagination {
        text-align: center;
      }
      .el-button {
        margin: 5px;
        float: right;
      }
    }
  }
  .pubilsh-comment {
    .el-button {
      width: 100%;
    }
  }
}
</style>
